<template>
    <div class="tools-div">
      <el-button type="success" size="small"  @click="exportData">导出</el-button>
      <el-button type="primary" size="small" @click="importData">导入</el-button>
    </div>

    <!-- 导入对话框 -->
    <el-dialog v-model="dialogImportVisible" title="导入" width="30%">
    <el-form label-width="120px">
        <el-form-item label="分类文件">
            <el-upload
                       class="upload-demo"
                       action="http://localhost:8501/admin/product/category/importData"
                       :on-success="onUploadSuccess"
                       :headers="headers"
                       >
                <el-button type="primary">上传</el-button>
            </el-upload>
        </el-form-item>
    </el-form>
</el-dialog>

    <!---懒加载的树形表格-->
    <el-table
        :data="list"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="fetchData"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="imageUrl" label="图标" #default="scope">
            <img :src="scope.row.imageUrl" width="50" />
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" />
        <el-table-column prop="status" label="状态" #default="scope">
        {{ scope.row.status == 1 ? '正常' : '停用' }}
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
    </el-table>
  
  </template>

<script setup>
import { ref ,onMounted} from 'vue';
import {FindCategoryByParentId,ExportCategoryData} from '@/api/category'
import {useApp } from '@/pinia/modules/app'
import {ElMessage} from 'element-plus'

//定义上传成功后的处理
const onUploadSuccess=async(res)=>{

    const {code} =res
    //判断
    if(code===200){
        ElMessage.success("导入成功")
        dialogImportVisible.value=false
        //刷新
           //查询一级分类
        const {data} =await FindCategoryByParentId(0)
        //赋值
        list.value=data


    }


}

//文件上传头信息字段
const headers=ref({

    token: useApp().authorization.token
})


//定义导入对话框显示
const importData=()=>{

    dialogImportVisible.value=true
}
//定义对话框控制变量
const dialogImportVisible =ref(false)



//定义导出的时间方法
const exportData=()=>{
    ExportCategoryData().then((res)=>{
        //创建bolb对象，接收二进制类文件数据
      const blob =new Blob([res]);
        //创建a标签 <a href="blob"> 分类数据.xlsx</a>
       const link= document.createElement('a');
       //赋值数据
       link.href=window.URL.createObjectURL(blob)
       //设置文件名称
       link.download = '分类数据.xlsx';
       //模拟点击
       link.click()
    })



}

// 定义list属性模型
const list = ref([])
//定义挂载后请求数据列表
onMounted(async()=>{

     //查询一级分类
    const {data} =await FindCategoryByParentId(0)
    //赋值
    list.value=data


})


// 加载数据的方法
const fetchData =async (row, treeNode, resolve) => {
    //获取当前分类的id，查询子级列表
    let parentId=row.id;
     //向后端发送请求获取数据,查询一级分类
     const {data} =await FindCategoryByParentId(parentId)
    // 返回数据
    resolve(data)

}

</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>